const path = require("path");

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {DefinPlugin} = require('webpack');

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "./build"),
        filename: "js/bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "postcss-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },

            // {
            //     //jpe?g 如果有e这个字符 就是jpeg 否则就是jpg
            //     test: /\.(jpe?g|png|svg)$/,
            //     use: {
            //         loader: "file-loader",
            //         //对图片进行命名
            //         options: {
            //             // outputPath: "img",  //放到img文件夹
            //             //img/放到img文件夹 [name]原来的图片名字 _分割 [hash:4]取4位 .[ext]原图片的后缀名

            //             name: "img/[name]_[hash:4].[ext]"
            //         }
            //     }
            // }

            // {
            //     test: /\.(jpe?g|png|svg)$/,
            //     use: {
            //         //对所有图片进行base64转码
            //         loader: "url-loader",
            //         options: {
            //             name: 'img/[name]_[hash:3].[ext]',
            //             //做限制 小于100kb的才做base64编码 其它的放到img文件夹
            //             limit: 100 * 1024
            //         }
            //     }
            // }

            //asset module type最新的一种打包资源方式 代替上面的loader 也不用下载loader
            {
                test: /\.(jpe?g|png)$/,
                type: 'asset',
                generator: {
                    filename: "img/[name]_[hash:2][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 100 * 1024
                    }
                }
            },

            // //打包字体1
            {
                test: /\.(woff2?|ttf|eot)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: 'font/[name]_[hash:2].[ext]'
                    }
                }
            }
            //打包字体2
            // {
            //     test: /\.(woff2?|ttf|eot)$/,
            //     type: "asset/resource",
            //     generator: {
            //         filename: "font/[name]_[hash:2][ext]"
            //     }
            // }
        ]
    },

    //打包自动删除build(dist)文件夹
    plugins: [
        // new CleanWebpackPlugin(),

        // //dist生成html文件
        // new HtmlWebpackPlugin()

        //制定模板打包
        // new HtmlWebpackPlugin({
        //     template: "./public/index.html"
        // }),
        // new DefinPlugin({
        //     BASE_URL: "'./'"
        // })
    ]
}